Question

0

219

Views

How to mock "new Date()" which is inside functional component?

I have the functional component "order". It has a lot of unimportant code (in this context I mean) and there are a few "new Date()" calls.
When the test snapshot of this component is creating, "new Date()" returns the current date object. Hence if I run test for this component at least one moment later, snapshots will differ from each other.
Thus I have tried to mock "new Date()" somehow like this:

    import renderer from 'react-test-renderer';

    test('TestName', async () => {
        let componentRenderer = null;

        const now = new Date('2000-01-01T10:00:00.135Z');
        jest.spyOn(global, 'Date').mockImplementation(() => now);
        await renderer.act(async () => {
          componentRenderer = await renderer.create(<Order orderId={0} />);
        });

        const orderFormComponent = componentRenderer.toJSON();
        expect(orderFormComponent).toMatchSnapshot();
      });

It doesn't work at all. It is always a regular "new Date()" call. I mean it works just fine if you call it right in the testing code below the mock lines. But I need mocked "new Date()" to be called inside my functional component when it is being created here:

renderer.create(<Order orderId={0} />)

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T22:36:37.172Z

I've found this approach to be the most generic one:

Create a MockDate:

export class MockDate extends Date {
    constructor(arg) {
        super(arg || 1);
    }
}

Use the created mock in jest:

beforeAll(() => {
    global.Date = MockDate as DateConstructor;
});

afterAll(() => {
    global.Date = Date;
});

Then, in your tests, console.log(new Date()) === MockDate 1970-01-01T00:00:00.001Z

0

219

How to mock "new Date()" which is inside functional component?

1 answers

0

Find remote jobs

Andres GPT